<template>
  <div class="question-new">
    <el-card>
      <p>试题录入</p>
      <el-form :rules="rules" style="padding-left: 100px" ref="form" :model="form" label-width="80px">
        <el-form-item label="学科" prop="subject">
          <el-select @click.native="getSubject" v-model="form.subjectID" placeholder="请选择" style="width: 400px">
            <el-option v-for="item in list" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录" prop="label">
          <el-select @click.native="getSubjectLabel" v-model="form.catalogID" placeholder="请选择" style="width: 400px">
            <el-option v-for="item in label" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业" prop="compony">
          <el-select @click.native="getcompanys" v-model="form.enterpriseID" placeholder="请选择" style="width: 400px">
            <el-option v-for="item in company" :key="item.id" :label="item.company" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-row type="flex" style="width: 400px">
            <el-col>
              <el-select @click.native="getprovince" v-model="form.province" placeholder="请选择" style="width: 200px">
                <el-option v-for="item in provinces" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-col>
            <el-col>
              <el-select @click.native="getcity" v-model="form.city" placeholder="请选择" style="width: 200px">
                <el-option v-for="item in citys" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="方向" prop="direction">
          <el-select v-model="form.direction" placeholder="请选择" style="width: 400px">
            <el-option v-for="item in directions" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型" prop="type">
          <el-radio-group v-model="form.questionType">
            <el-radio v-for="item in questionTypes" :key="item.value" :label="item.label" :value="item.value"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-radio-group v-model="form.difficulty">
            <el-radio label="简单" value="1"></el-radio>
            <el-radio label="一般"></el-radio>
            <el-radio label="困难"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题干" prop="tigan">
          <div class="editor" ref="editorElem"></div>
        </el-form-item>
        <el-form-item label="选项" prop="resource">
          <div v-for="item in form.options" :key="item.code">
            <el-radio-group v-model="item.isRight"> <el-radio :label="item.code"> </el-radio> </el-radio-group>：
            <el-input style="width: 300px" v-model="item.title"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="解析视频" style="width: 400px" prop="vedio">
          <el-input v-model="form.videoURL"></el-input>
        </el-form-item>
        <el-form-item label="答案解析" prop="answer">
          <div class="editor" ref="editor2Elem"></div>
        </el-form-item>
        <el-form-item label="题目备注">
          <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="form.remarks" style="width: 400px"> </el-input>
        </el-form-item>
        <el-form-item label="试题标签">
          <el-select v-model="form.direction" placeholder="活动区域" style="width: 400px">
            <el-option label="区域一" value="shanghai"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add">{{ isAdd ? '确认添加' : '确认修改' }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { add, detail, update } from '@/api/hmmm/questions'
import { provinces, citys } from '@/api/hmmm/citys'
import { direction, questionType, difficulty } from '@/api/hmmm/constants'
import { mapActions, mapState } from 'vuex'
import { deal, dealType } from '@/api/hmmm/questions-all'
import E from 'wangeditor'
export default {
  async created () {
    const id = this.$route.query.id
    if (id) {
      this.isAdd = false
      const { data } = await detail({ id })
      // console.log(data)
      this.form = data
      this.form.options = this.form.options.map((item) => {
        if (item.isRight) {
          item.isRight = item.code
        } else {
          item.isRight = false
        }
        return item
      })
      this.form.difficulty = dealType(this.form.difficulty, difficulty)
      this.form.questionType = dealType(this.form.questionType, questionType)
      console.log(this.form)
    }
  },
  data () {
    const labelRule = (rule, value, callback) => {
      if (!this.subjectID) {
        callback(new Error('请先选择学科'))
      }
    }
    return {
      isAdd: true,
      editor: null,
      provinces: [], // 城市数据
      citys: [], // 城区数据
      directions: direction, // 方向数据
      questionTypes: questionType, // 题型
      form: {
        catalogID: null, // 目录
        province: '', // 城市
        city: '', // 城区
        difficulty: '简单', // 难度
        enterpriseID: '', // 企业
        subjectID: '', // 学科
        options: [
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ],
        question: '', // 题干
        videoURL: 'https://v-cdn.zjol.com.cn/277003.mp4', // 解析视频
        answer: '', // 答案解析
        questionType: '单选', // 题型
        direction: '', // 方向
        remarks: ''
      },
      rules: {
        subject: [{ required: true, message: '请选择学科', trigger: 'blur' }],
        label: [
          { required: true, message: '请选择目录', trigger: 'blur' },
          { validator: labelRule, trigger: 'blur' }
        ],
        direction: [{ required: true, message: '请选择方向', trigger: 'blur' }],
        compony: [{ required: true, message: '请选择企业', trigger: 'blur' }],
        city: [{ required: true, message: '请选择城市', trigger: 'blur' }],
        type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
        difficulty: [{ required: true, message: '请选择难度', trigger: 'blur' }],
        tigan: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        resource: [{ required: true, message: '请选择选项', trigger: 'blur' }],
        vedio: [{ required: true, message: '请选择视频', trigger: 'blur' }],
        answer: [{ required: true, message: '请输入答案解析', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapState('question', ['list', 'label', 'company']) // 学科
  },
  methods: {
    ...mapActions('question', ['getList', 'getlabel', 'getcompany']),
    // 获取学科
    getSubject () {
      this.getList()
    },
    // 获取目录
    getSubjectLabel () {
      if (this.form.subjectID) {
        this.getlabel(this.form.subjectID)
      }
    },
    // 获取公司
    getcompanys () {
      this.getcompany()
    },
    // 获取城市
    getprovince () {
      this.provinces = provinces()
      // console.log(provinces())
    },
    // 获取城区
    getcity () {
      this.citys = citys(this.form.province)
      // console.log(this.citys)
    },
    // 添加
    async add () {
      if (this.isAdd) {
        const obj = this.form
        obj.difficulty = `${deal(obj.difficulty, difficulty)}` // 处理难度
        obj.questionType = `${deal(obj.questionType, questionType)}` // 处理类型
        obj.options = obj.options.map((item) => {
          if (item.code === item.isRight) {
            item.isRight = true
          }
          return item
        })
        try {
          await add(obj)
          this.$router.push({ name: 'questions-list' })
        } catch (error) {
          console.log(error)
        }
      } else {
        console.log(this.form)
        this.form.difficulty = `${deal(this.form.difficulty, difficulty)}`
        this.form.questionType = `${deal(this.form.questionType, questionType)}` // 处理类型
        this.form.options = this.form.options.map((item) => {
          if (item.code === item.isRight) {
            item.isRight = true
          }
          return item
        })
        try {
          await update(this.form)
          this.$router.push({ name: 'questions-list' })
        } catch (error) {
          console.log(error)
        }
      }
    },
    editors () {
      const editor = new E(this.$refs.editorElem)
      const editor2 = new E(this.$refs.editor2Elem)
      editor.config.menus = ['bold', 'italic', 'underline', 'strikeThrough', 'indent', 'lineHeight', 'foreColor', 'backColor', 'link', 'list', 'todo', 'justify', 'quote', 'image']
      editor2.config.menus = ['bold', 'italic', 'underline', 'strikeThrough', 'indent', 'lineHeight', 'foreColor', 'backColor', 'link', 'list', 'todo', 'justify', 'quote', 'image']
      // 配置 onchange 回调函数，将数据同步到 vue 中
      editor.config.onchange = (newHtml) => {
        this.form.question = newHtml
      }
      editor2.config.onchange = (newHtml) => {
        this.form.answer = newHtml
      }
      // 创建编辑器
      editor.create()
      editor2.create()
      // console.log(this.form)
      editor.txt.html(this.form.question)
      editor2.txt.html(this.form.answer)

      this.editor = editor
    }
  },
  mounted () {
    setTimeout(() => {
      this.editors()
    }, 460)
  }
}
</script>

<style scoped lang='scss'>
.question-new {
  padding: 15px 10px;
  p {
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
  }
  .editor {
    position: relative;
    z-index: 66;
  }
}
</style>
